<template>
  <div class="article-dialog">
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" @close="closeDialog">
      <el-form :model="form">
        <el-form-item label="文章名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签名称" :label-width="formLabelWidth">
          <el-select v-model="form.tag_id" placeholder="请选择标签">
           <el-option v-for="item in tagArr" :key="item.id" :label="item.tag_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-select v-model="form.sort_id" placeholder="请选择类型">
            <el-option v-for="item in typeArr" :key="item.id" :label="item.type_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" :label-width="formLabelWidth">
          <Editor ref="sonRef" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, watch, nextTick  } from 'vue'
import Editor from './Editor.vue'
import {getTypes} from '@/api/type'
import {getTags} from '@/api/tags'
import {addArticle, editArticle} from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus'

interface formObj {
  id?: string
  title: string,
  tag_id: number,
  sort_id: number,
  content: string
}

export default defineComponent({
  name: 'DialogAlert',
  components: {
    Editor
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    alertTitle: {
      type: String,
      default: ''
    },
    alertObj: {
      type: Object,
      default: ()=>{}
    }
  },
  setup(props, { emit }) {
    // 通过 ref 绑定子组件
    const sonRef = ref(null);
    const state = reactive({
      dialogFormVisible: false,
      dialogTitle: '',
      dialogObj: {},
      form: {
        title: '',
        tag_id: 0,
        sort_id: 0,
        content: '',
        paths: ''
      },
      formLabelWidth: '80px',
      typeArr: [],
      tagArr: [],
    })

    
    onMounted( () => {
     getType()
     getTag()
    })

    // 获取类型
    const getType = async () => {
       const params = {
        pageNum: 1,
        pageSize: 1000
      }
      const {data} = await getTypes(params); 
      const result = data.data.result;
      result.forEach(item=> {
        state.typeArr.push(item)
      })
    }
    // 获取标签
    const getTag = async () => {
       const params = {
        pageNum: 1,
        pageSize: 1000
      }
      const {data} = await getTags(params); 
      const result = data.data.result;
      result.forEach(item=> {
        state.tagArr.push(item)
      })
    }
    
    // 关闭弹窗
    const closeDialog = () => {
      emit('closeDialog', 1)
    }

    // 提交数据
    const submit = async () => {
      // 获取子组件的数据
      state.form.content = sonRef.value.content.html
      let params = {}
      let query = null;
      let paths = sessionStorage.getItem('paths')
      state.form.paths = paths

      if(props.alertTitle == '新增文章') {
        params = state.form
        query = addArticle
      } else {
        query = editArticle
        params = {
          id: state.form.id,
          title: state.form.title,
          tag_id: state.form.tag_id,
          sort_id: state.form.sort_id,
          content: sonRef.value.content.html,
          paths: state.form.paths
        }
      }

      const {data} = await query(params);

      if(data.code === 200) {
         ElMessage({
          type: 'success',
          message: props.alertTitle+'成功',
        })
        emit('closeDialog', 2)
      } else {
        ElMessage({
          type: 'error',
          message: props.alertTitle+'失败',
        })
      }
    }

    watch(props, async ( newVal) => {
      state.dialogFormVisible = newVal.dialogVisible
      state.dialogTitle = newVal.alertTitle
      if(Object.keys(newVal.alertObj).length) {
        Object.assign(state.form, newVal.alertObj)
        await nextTick()
        sonRef.value.syncHTML(newVal.alertObj.content)
      } else {
        let obj = {
          title: '',
          tag_id: '',
          sort_id: '',
          content: ''
        }
        state.form = obj
        await nextTick()
        sonRef.value.syncHTML('')
      }   
    })

    return {
      sonRef,
      ...toRefs(state),
      closeDialog,
      submit,
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
